<template>
	<div :style="{'margin-left': marginLeft}" class="related-business">
		<el-popover
			v-if="alterable"
			v-model="showPopover"
			placement="bottom"
			width="800"
			popper-class="no-padding-popover"
			trigger="click">
			<crm-relatives
				v-if="showTaskRelative"
				ref="crmrelative"
				:show="showPopover"
				:radio="false"
				:selected-data="relatedListData"
				:show-types="showTypes"
				@close="crmrelativeClose"
				@changeCheckout="checkInfos"/>
			<p
				v-if="showCRMPermission"
				slot="reference"
				class="add-file"
				@click="showTaskRelative = true">
				<img
					src="@/assets/img/relevance_business.png"
					alt="">
				关联业务
			</p>
		</el-popover>
		<p
			v-if="!alterable"
			:style="{color: alterableColor}"
			class="alterable-p">关联业务</p>
		<div
			v-for="(items, key) in relatedListData"
			:key="key">
			<related-business-cell
				v-for="(item, itemIndex) in items"
				:data="item"
				:cell-index="itemIndex"
				:type="key"
				:key="itemIndex"
				@detail="checkRelatedDetail(key, item)"/>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import CrmRelatives from '@/components/table/CrmRelatives'
	import RelatedBusinessCell from '@/components/table/relatedBusinessCell'
	export default {
		components: {
			CrmRelatives,
			RelatedBusinessCell
		},
		props: {
			marginLeft: {
				type: String,
				default: '20px'
			},
			// 编辑时传递所有关联数据   关联联系人-contacts 关联客户-customer 商机-business 合同-contract
			allData: {
				type: Object,
				default: () => {
					return {
						customer: [],
						customerdebt: [],
					}
				}
			},
			alterable: {
				type: Boolean,
				default: true
			},
			alterableColor: {
				type: String,
				default: '#999'
			}
		},
		data() {
			return {
				showTypes: ['customer', 'customerdebt'],
				showPopover: false,
				relevanceAll: {
					customer_ids: [],
					customerdebt_ids: []
				},
				
				// 关联业务信息
				showRelative: false,
				relatedListData: {},
				// 展示任务相关
				showTaskRelative: false
			}
		},
		watch: {
			allData: function() {
				this.relatedListData = this.allData
			}
		},
		mounted() {
			// 编辑时勾选
			this.relatedListData = this.allData
		},
		computed: {
			...mapGetters(['allAuth']),
			showCRMPermission() {
				return this.allAuth.customer
			}
		},
		methods: {
			crmrelativeClose() {
				this.showPopover = false
			},
			checkInfos(val) {
				this.showPopover = false
				this.relatedListData = val.data
				for (const key in val.data) {
					const list = val.data[key]
					this.relevanceAll[key + '_ids'] = list.map(function(
						item,
						index,
						array
					) {
						return item['id']
					})
				}
				// console.log(this.relevanceAll);
				this.$emit('checkInfos', this.relevanceAll)
			},
			
			checkRelatedDetail(field, val) {
				// field = field == "debt" ? "customerdebt" : field
				// val.key = val[field + '_id']
				val.key = val['customer_id'] ? val['customer_id'] : val['id']
				this.$emit('checkRelatedDetail', field, val)
			}
		}
	}
</script>

<style scoped lang="scss">
	.related-business {
		color: #777;
		font-size: 12px;
		margin: 10px 0;

		.alterable-p {
			padding-bottom: 10px;
			font-size: 13px;
		}

		.add-file {
			margin: 10px 0;
			font-size: 13px;
			color: #3e84e9;
			cursor: pointer;
			display: inline-block;

			img {
				vertical-align: middle;
				width: 15px;
				margin-right: 5px;
			}
		}
	}
</style>
